<template>
  <div>
    <!-- 头部 -->
    <div class="topInfo">
      <img :src="backgroundImg" mode="aspectFill" class="backgroundImg" />
      <div>
        <img class="headPortrait" :src="account.logo" mode="aspectFill" />
        <span>{{account.shopName}}</span>
      </div>
    </div>
    <!-- 选项 -->
    <div class="listBox">
      <i-cell-group>
        <i-cell url="/pages/shop-management/my-verification-manual/main">
          <div class="list" @click="linkUrl('manual')">
            <img
              class="listIco"
              src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/cancel_after_ver_smhx.png"
              mode="aspectFill"
            />
            <span class="listText">手动核销</span>
          </div>
        </i-cell>
        <i-cell url="/pages/shop-management/my-verification-record/main">
          <div class="list" @click="linkUrl('record')">
            <img
              class="listIco"
              src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/cancel_after_ver_sdhx.png"
              mode="aspectFill"
            />
            <span class="listText">核销记录</span>
          </div>
        </i-cell>
        <i-cell url="/pages/shop-management/set-verification/main">
          <div class="list" @click="newLinkUrl">
            <img
              class="listIco"
              src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/cancel_after_ver_hxmgl.png"
              mode="aspectFill"
            />
            <span class="listText">核销码管理</span>
          </div>
        </i-cell>
      </i-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  data () {
    return {
      backgroundImg:
        'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_cancel_after_ver.png'
    }
  },
  created () {},
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  methods: {
    linkUrl (val) {
      this.$router.push(`/pages/shop-management/my-verification-${val}/main`)
    },
    newLinkUrl () {
      this.$router.push(`/pages/shop-management/set-verification/main`)
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.topInfo {
  position: relative;
  width: 100%;
  height: 187px;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // box-shadow: 0 3px 5px $light-black;
  .backgroundImg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 187px;
    z-index: -1;
  }
  div {
    display: flex;
    align-items: center;
    margin: 20px 0 0 50px;
    height: 80px;
    .headPortrait {
      width: 40px;
      height: 40px;
      border-radius: 50px;
    }
    span {
      margin-left: 10px;
      font-size: 13px;
      line-height: 40px;
      color: #fff;
    }
  }
}
.listBox {
  margin-top: 20px;
  .list {
    display: flex;
    align-items: center;
    box-shadow: 1px 0px 19px $light-black;
    border-radius: 6px;
    height: 60px;
    .listIco {
      width: 50px;
      height: 50px;
      margin: 0 15px;
    }
    .listText {
      font-size: 14px;
      color: #000;
      margin-left: 10px;
    }
  }
}
</style>
